<ngm-splitter [type]="SplitterType.Horizontal" class="flex-1">
    <ngm-splitter-pane size="230px">
        <ngm-splitter class="w-full h-full" [type]="1">
            <ngm-splitter-pane size='15rem' class="flex flex-col justify-items-stretch items-stretch">
                <mat-toolbar class="pac-sub-toolbar flex justify-between items-center" displayDensity="compact">
                    <span>
                        {{ 'PAC.MODEL.DIMENSION.Levels' | translate: {Default: 'Levels'} }}
                    </span>

                    <span class="flex flex-1"></span>
                    <button mat-icon-button color="warn" displayDensity="cosy" class="pac-cdk-drop__recycle-bin"
                        cdkDropList
                        [cdkDropListEnterPredicate]="levelRemovePredicate"
                        (cdkDropListDropped)="removeLevel($event)"
                    >
                        <mat-icon color="warn" fontSet="material-icons-round">delete</mat-icon>
                    </button>
                </mat-toolbar>
                <div id="pac-model-dimension__hierarchy-levels"
                    class="pac-cdk-drop__list flex-1"
                    cdkDropList
                    [cdkDropListData]="levels()"
                    (cdkDropListDropped)="dropLevel($event)"
                    [cdkDropListEnterPredicate]="levelPredicate"
                >
                    <mat-nav-list class="max-h-full overflow-hidden hover:overflow-y-auto" displayDensity="compact">
                      @for (level of levels(); track level.__id__; let i = $index) {
                        <mat-list-item [activated]="(level.__id__ ?? i) === designerComponentId()"
                            cdkDrag
                            [cdkDragData]="level"
                            (click)="onLevelSelect(level.__id__ ?? i)"
                        >
                            <ngm-display-behaviour [option]="{value: level.name, label: level.caption}"
                                [displayBehaviour]="DisplayBehaviour.descriptionAndId">
                            </ngm-display-behaviour>
                        </mat-list-item>
                      }
                    </mat-nav-list>
                </div>
            </ngm-splitter-pane>

            <ngm-splitter-pane class="flex flex-col">
                <mat-toolbar class="pac-sub-toolbar flex justify-between items-center" displayDensity="compact">
                    <span>
                        {{ 'PAC.MODEL.DIMENSION.DimensionTables' | translate: {Default: 'Dimension Tables'} }}
                    </span>
                    
                    <button mat-icon-button color="warn" displayDensity="cosy" class="pac-cdk-drop__recycle-bin"
                        cdkDropList
                        [cdkDropListEnterPredicate]="tableRemovePredicate"
                        (cdkDropListDropped)="removeTable($event)"
                        >
                        <mat-icon color="warn" fontSet="material-icons-round">delete</mat-icon>
                    </button>
                </mat-toolbar>
                <div [id]="HierarchyTableId"
                    class="pac-cdk-drop__list flex-1 overflow-y-auto"
                    cdkDropList
                    [cdkDropListData]="entities"
                    (cdkDropListDropped)="dropTable($event)"
                    [cdkDropListEnterPredicate]="tablesPredicate"
                >
                  <div class="overflow-y-auto max-h-full h-full">
                    @for (table of tables$ | async; track table.name) {
                      <ngm-entity-schema
                        [dataSettings]="{dataSource: dataSourceName, entitySet: table.name}"
                        [capacities]="[
                            EntityCapacity.Dimension,
                            EntityCapacity.Measure,
                        ]"
                        />
                    }
                  </div>
                </div>
            </ngm-splitter-pane>
        </ngm-splitter>
    </ngm-splitter-pane>
    <ngm-splitter-pane class="flex-1">
        <ngm-splitter class="pac-model-hierarchy-content ngm-layout-container-secondary flex-1 h-full w-full" [type]="SplitterType.Vertical">
            <ngm-splitter-pane class="pac-model-hierarchy__preview flex flex-col justify-items-stretch items-stretch">
                <mat-toolbar class="pac-sub-toolbar flex justify-between items-center" displayDensity="compact" >
                    <div class="flex">
                        <span>
                            {{ 'PAC.MODEL.DIMENSION.DataPreview' | translate: {Default: 'Data Preview'} }}
                        </span>
                    </div>
                    <div class="flex items-center gap-4">
                      @if (viewMode() === 'tree') {
                        <mat-checkbox [(ngModel)]="showKey">
                            {{ 'PAC.MODEL.DIMENSION.ShowMemberKey' | translate: {Default: 'Show Member Key'} }}
                        </mat-checkbox>
                      }
                        <mat-button-toggle-group [(ngModel)]="viewMode" ngmAppearance="outline" color="accent">
                            <mat-button-toggle value="table" [matTooltip]=" 'PAC.KEY_WORDS.Table' | translate: {Default: 'Table'} ">
                                <mat-icon fontSet="material-icons-outlined" displayDensity="compact" class="opacity-50">table_view</mat-icon>
                            </mat-button-toggle>
                            <mat-button-toggle value="tree" [matTooltip]=" 'PAC.KEY_WORDS.Tree' | translate: {Default: 'Tree'} ">
                                <mat-icon fontSet="material-icons-outlined" displayDensity="compact" class="opacity-50">account_tree</mat-icon>
                            </mat-button-toggle>
                        </mat-button-toggle-group>

                        <button mat-icon-button displayDensity="cosy" class="ngm-toolbar__action"
                            (click)="refresh()"
                        >
                            <mat-icon fontSet="material-icons-round">refresh</mat-icon>
                        </button>
                    </div>
                </mat-toolbar>
                <div style="flex: 1; max-height: calc(100% - 34px)" class="flex">
                  @switch (viewMode()) {
                    @case('table') {
                        <ngm-table class="ngm-data-preview striped flex-1 max-w-full"
                            [columns]="columns()"
                            [data]="data()"
                            [paging]="true"
                        ></ngm-table>
                    }
                    @case('tree') {
                        <ngm-hierarchy-table class="flex-1 max-w-full" displayDensity="compact"
                            [columns]="levelTableColumns()"
                            [data]="treeData()"
                            [displayBehaviour]="showKey() ? DisplayBehaviour.descriptionAndId : DisplayBehaviour.descriptionOnly"
                            paging
                        />
                    }
                  }

                  @if (loading()) {
                    <mat-spinner strokeWidth="2" diameter="30"/>
                  }
                  @if (error$ | async; as error) {
                    <div class="pac-model-hierarchy__error">
                        <div style="font-size: 4rem;" class="font-notoColorEmoji">🐞</div>
                        <div>{{error}}</div>
                    </div>
                  }
                </div>
            </ngm-splitter-pane>
            <ngm-splitter-pane size='10rem' [collapsed]="tablesJoinCollapsed">
                <ngm-tables-join [dataSource]="dataSourceName" style="margin: 1rem;"
                    [tables]="tables$ | async"
                    (tablesChange)="onTablesChange($event)"
                >
                </ngm-tables-join>
            </ngm-splitter-pane>
        </ngm-splitter>
    </ngm-splitter-pane>
</ngm-splitter>